<template>
	<view class="filter-container">
		<!-- 位置 -->
		<picker  mode="selector" :range="locations" @change="onLocationChange">
			<view class="filter-item">
				<text> {{ selectedLocation }}</text>
			</view>
		</picker>

		<!-- 价格 -->
		<picker mode="selector" :range="prices" @change="onPriceChange">
			<view class="filter-item">
				<text> {{ selectedPrice }}</text>
			</view>
		</picker>

		<!-- 户型 -->
		<picker mode="selector" :range="types" @change="onTypeChange">
			<view class="filter-item">
				<text> {{ selectedType }}</text>
			</view>
		</picker>
		<!-- 更多 -->
	<picker mode="selector" :range="types" @change="onTypeChange">
		<view class="filter-item">
			<text> {{ selectedType }}</text>
		</view>
	</picker>
	</view>
</template>
<script setup lang="ts">
import { ref } from 'vue';

const locations = ref(['北京', '上海', '广州', '深圳']);
const prices = ref(['1000-2000', '2000-3000', '3000-4000', '4000+']);
const types = ref(['一室一厅', '两室一厅', '三室一厅', '四室及以上']);

const selectedLocation = ref('位置');
const selectedPrice = ref('价格');
const minPrice = ref();
const maxPrice = ref();
const selectedType = ref('类型');
const showMore = ref(false);

function onLocationChange(e) {
	console.log(e);
  selectedLocation.value = locations.value[e.detail.value];
}

function onPriceChange(e) {
  selectedPrice.value = prices.value[e.detail.value];
  if (selectedPrice.value.includes('+')) {
    minPrice.value = 4000;
  } else {
    const [min, max] = selectedPrice.value.split('-');
    minPrice.value = min;
    maxPrice.value = max;
  }
}

function onTypeChange(e) {
  selectedType.value = types.value[e.detail.value];
}

function toggleMore() {
  showMore.value = !showMore.value;
}
defineExpose({
	selectedLocation,
	minPrice,
	maxPrice,
	selectedType
})
</script>


<style scoped>
.filter-container
{
	display: flex;
	width: calc(100%-20px);
	justify-content: space-around;
	margin: auto;
}
picker{
	  width: 67px;
	  
}
.filter-item
{
	font-size: 14px;
	color: #333;
	text-align: center;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;

}
</style>
